import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useTheme } from '@/lib/theme';

const colorThemes = [
  { value: 'neutral', label: '中性灰', color: 'oklch(0.205 0 0)' },
  { value: 'blue', label: '科技蓝', color: 'oklch(0.517 0.176 255.324)' },
  { value: 'green', label: '清新绿', color: 'oklch(0.497 0.14 160.708)' },
  { value: 'purple', label: '梦幻紫', color: 'oklch(0.509 0.197 303.9)' },
  { value: 'rose', label: '玫瑰红', color: 'oklch(0.577 0.214 12.422)' },
  { value: 'orange', label: '活力橙', color: 'oklch(0.646 0.222 41.116)' },
] as const;

/**
 * 颜色主题选择器组件
 * 提供多种颜色主题供用户选择
 */
export default function ColorThemeSelector() {
  const { colorTheme, setColorTheme } = useTheme();

  return (
    <div className="space-y-3">
      <div className="text-sm font-medium">主题颜色</div>
      <div className="grid grid-cols-3 gap-3">
        {colorThemes.map((theme) => (
          <button
            key={theme.value}
            onClick={() => setColorTheme(theme.value as any)}
            className={cn(
              'group relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all hover:shadow-md',
              colorTheme === theme.value
                ? 'border-primary bg-primary/5'
                : 'border-border hover:border-primary/50'
            )}
          >
            <div
              className="h-10 w-10 rounded-full shadow-sm"
              style={{ backgroundColor: theme.color }}
            />
            <span className="text-xs font-medium">{theme.label}</span>
            {colorTheme === theme.value && (
              <div className="absolute right-2 top-2">
                <Check className="h-4 w-4 text-primary" />
              </div>
            )}
          </button>
        ))}
      </div>
      <p className="text-xs text-muted-foreground">
        选择您喜欢的主题颜色，将应用于按钮、链接等主要元素
      </p>
    </div>
  );
}

